<template>
    <el-container class="navigation-bar">
        <el-aside width="200px" class="menu-content">
            <el-menu :default-active="activeIndex" background-color="#304156" text-color="#fff"
                active-text-color="#ffd04b" @select="handleSelect" style="height: 100vh;">
                <div class="logo-content">
                    <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;">
                        <img src="../assets/logo.png" style="height:50px;" alt="" />
                        <div class="logo-text">
                            <div>融销通</div>
                        </div>
                    </div>
                </div>
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">商品货源</el-menu-item>
                <el-menu-item index="3">求购需求</el-menu-item>
                <el-menu-item index="4">农业知识</el-menu-item>
                <el-menu-item index="5">专家指导</el-menu-item>
                <el-menu-item index="6">购物车</el-menu-item>
                <el-sub-menu index="7">
                    <template #title>融资申请</template>
                    <el-menu-item index="7-1">item one</el-menu-item>
                    <el-menu-item index="7-2">item two</el-menu-item>
                    <el-menu-item index="7-3">item three</el-menu-item>
                    <el-sub-menu index="7-4">
                        <template #title>item four</template>
                        <el-menu-item index="7-4-1">item one</el-menu-item>
                        <el-menu-item index="7-4-2">item two</el-menu-item>
                        <el-menu-item index="7-4-3">item three</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <el-sub-menu index="8">
                    <template #title>设置</template>
                    <el-menu-item index="8-1">item one</el-menu-item>
                    <el-menu-item index="8-2">item two</el-menu-item>
                    <el-menu-item index="8-3">item three</el-menu-item>
                    <el-sub-menu index="8-4">
                        <template #title>item four</template>
                        <el-menu-item index="8-4-1">item one</el-menu-item>
                        <el-menu-item index="8-4-2">item two</el-menu-item>
                        <el-menu-item index="8-4-3">item three</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <!-- <el-row> -->
                <!-- <el-col :span="6"> -->
                <!-- <span class="el-dropdown__box">
                            <el-avatar :size="large" :src="defaultAvatar" />
                        </span> -->
                <!-- </el-col> -->
                <div>{{ userInfo.role }}：<strong >{{ userInfo.nickname?userInfo.nickname:'未设置昵称' }}</strong></div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="defaultAvatar" />
                        <el-icon>
                            <ArrowDown />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- </el-row> -->
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { User, Avatar, Crop, EditPen, SwitchButton, ArrowDown} from '@element-plus/icons-vue'

const defaultAvatar = ('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {

}
const handleCommand = (command)=>{
    console.log(command);
    
}

const userInfo = ref({
    username: '',
    nickname: '',
    password: '',
    role: '',
    avatar: '',
})
</script>

<style scoped>
.navigation-bar {

    .menu-content {
        background-color: #304156 !important;

        .logo-content {
            color: white;
            text-align: center;
            margin-top: 10px;
            margin-left: 20px;

            .logo-text {
                margin-left: 10px;
            }
        }
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .el-dropdown__box {
        display: flex;
        align-items: center;
        outline: none;
    }
}
</style>